<template>
  <p>输入防抖，延迟显示</p>
  <input type="text" v-model="keyword">
  <p>keyword={{ keyword }}</p>
</template>

<script>

import {ref, customRef} from "vue";

export default {
  name: "Demo",
  setup() {

    // 自定义ref，实现输入防抖操作
    const myRef = (value) => {

      // 记录定时器
      let timer;

      return customRef((track, trigger) => {
        return {
          get() {
            // 1.追踪修改
            track()
            // 返回变化的内容
            return value
          },
          set(newValue) {
            // 2.修改数据
            value = newValue
            // 每次进入清除定时器
            if (timer) {
              clearTimeout(timer)
            }
            // 开启定时器
            timer = setTimeout(() => {
              // 3.通知vue更新页面
              trigger()
            }, 300)
          }
        }
      })
    }

    // 调用自定义
    const keyword = myRef()

    return {
      keyword
    }
  }
}
</script>

<style scoped>

</style>